<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>通用模块实例</title>
<link href="../css/common.css" rel="stylesheet" type="text/css" />
<link href="../css/demo.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/sea.js"></script>
<script type="text/javascript" src="../js/sea_init.js"></script>
<script type="text/javascript">
    seaInit();
</script>
<style type="text/css">
.bg1{background:#ccc}
.bg2{background:#ddd}
.bg3{background:#eee}
</style>
</head>
<body>
<div class="w">

    <div>
        <div class="p10">
            <p>* 带边框默认padding值改为9，调用样式“p9”;不带边框默认padding值为10，调用样式“p10”</p>
            <p>* js调用的css名称加前缀"fn_"</p>
            <p>* js总包名命名加前缀“p”，驼峰式命名，如var pPackageName = {}</p>
            <p>* css名及图片命名小写，下划线分割</p>
            <p>* css尽量少用标签选择器</p>
            <p>* 非通用模块起名不要过于普通（如header\footer\content等）,可使用层级式命名，如gamelist ,gamelist_hd, gamelist_bd</p>
        </div>
    </div>

    <div class="fix mb20">
        <div class="p9 bd1">
            <div>
                <span class="f_s ghot">f_s ghot</span>
                <span class="f_m ggreen">f_m ggreen</span>
                <span class="f_l g46">f_l g46 默认文本色</span>
                <span class="f_xl g81">f_xl g81</span>
                <span class="f_xxl g81">f_xxl</span>
            </div>
        </div>
    </div>

    <div class="mb20 s_line"></div>

    <div class="mb20">
        <div class="m_box">
            <div class="m_box_hd">
                <h2>前端模版</h2>
            </div>
        </div>
        <div>
            <div id="results">results</div>
            <div id="results2">results2</div>
        </div>
        <!--前端模版相关-->
        <script type="text/html" id="item_tmpl">
            <div id="<%=id%>">
                <div class="grid_1 alpha right">
                    <img class="righted" src="<%=profile_image_url%>"/>
                </div>
                <div class="grid_6 omega contents">
                    <p><b><a href="/<%=from_user%>"><%=from_user%></a>:</b> <%=text%></p>
                </div>
            </div>
        </script>
        <script type="text/html" id="user_tmpl">
            <% for ( var i = 0; i < users.length; i++ ) { %>
                <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
                <% } %>
        </script>
    </div>
    <div class="mb20 s_line"></div>

    <div class="mb20">
        <h2>弹出层</h2>
        <div class="p10">
            <a id="iframeDiv" href="javascript:;">iframeDiv</a>
            <a id="pageDiv" href="javascript:;">页面层</a>
            <a id="alertDiv" href="javascript:;">提示</a>
            <a id="confirmDiv" href="javascript:;">confirm</a>
            <a id="msgDiv" href="javascript:;">msg</a>
            <a id="tipsDiv" href="javascript:;">tips</a>
        </div>
    </div>
    <div class="mb20 s_line"></div>


    <div class="mb20">
        <h2>tabs插件</h2>
        <div id="tabChange">
            <div class="fn_tab">
                <ul>
                  <li class="fn_tab_item">tab1</li>
                  <li class="fn_tab_item">tab2</li>
                  <li class="fn_tab_item">tab3</li>
                </ul>
            </div>
            <div class="fn_con">
                <div class="fn_con_item">
                    content1 content1 content1 content1 content1 content1
                    content1 content1 content1 content1 content1 content1
                    content1 content1 content1 content1 content1 content1
                    content1 content1 content1 content1 content1 content1
                    content1 content1 content1 content1 content1 content1
                    <img src="../other/banner1.jpg" alt="" />
                </div>
                <div class="fn_con_item" style="display:none">
                    content2 content2 content2 content2 content2 content2
                    content2 content2 content2 content2 content2 content2
                    content2 content2 content2 content2 content2 content2
                    content2 content2 content2 content2 content2 content2
                    content2 content2 content2 content2 content2 content2
                    <img src="../other/banner2.jpg" alt="" />
                </div>
                <div class="fn_con_item" style="display:none">
                    content3 content3 content3 content3 content3 content3
                    content3 content3 content3 content3 content3 content3
                    content3 content3 content3 content3 content3 content3
                    content3 content3 content3 content3 content3 content3
                    content3 content3 content3 content3 content3 content3
                    <img src="../other/banner3.jpg" alt="" />
                </div>
            </div>
        </div>
    </div>
    <div class="mb20 s_line"></div>


    <div class="mb20">
        <h2>图片切换插件纵向</h2>
        <div>pCommon.slider.init("#slidBanner1", {type: "v"});</div>
        <div id="slidBanner1" class="m_slide">
            <div class="fn_con con">
                <div class="fn_con_inner con_inner">
                    <div class="fn_con_item con_item">
                        <img src="../other/banner1.jpg" alt="" />
                    </div>
                    <div class="fn_con_item con_item">
                        <img src="../other/banner2.jpg" alt="" />
                    </div>
                    <div class="fn_con_item con_item">
                        <img src="../other/banner3.jpg" alt="" />
                    </div>
                </div>
            </div>
            <div class="fn_btnbox btnbox">
                <ul>
                  <li class="fn_btn_item btn_item on">btn1</li>
                  <li class="fn_btn_item btn_item">btn2</li>
                  <li class="fn_btn_item btn_item">btn3</li>
                </ul>
            </div>
            <div class="fn_btnbox_extra">
                <a href="javascript:;" class="fn_pre">上一张</a>
                <a href="javascript:;" class="fn_next">下一张</a>
            </div>
        </div>
    </div>
    <div class="mb20">
        <h2>图片切换插件横向</h2>
        <div>pCommon.slider.init("#slidBanner1", {type: "h"});</div>
        <div id="slidBanner2" class="m_slide">
            <div class="fn_con con">
                <div class="fn_con_inner con_inner">
                    <div class="fn_con_item con_item">
                        <img src="../other/banner1.jpg" alt="" />
                    </div>
                    <div class="fn_con_item con_item">
                        <img src="../other/banner2.jpg" alt="" />
                    </div>
                    <div class="fn_con_item con_item">
                        <img src="../other/banner3.jpg" alt="" />
                    </div>
                </div>
            </div>
            <div class="fn_btnbox btnbox">
                <ul>
                  <li class="fn_btn_item btn_item on">btn1</li>
                  <li class="fn_btn_item btn_item">btn2</li>
                  <li class="fn_btn_item btn_item">btn3</li>
                </ul>
            </div>
            <div class="fn_btnbox_extra">
                <a href="javascript:;" class="fn_pre">上一张</a>
                <a href="javascript:;" class="fn_next">下一张</a>
            </div>
        </div>
    </div>
    <div class="mb20">
        <h2>图片切换插件 渐隐</h2>
        <div>pCommon.slider.init("#slidBanner1", {type: "a"});</div>
        <div id="slidBanner3" class="m_slide">
            <div class="fn_con con">
                <div class="fn_con_inner con_inner">
                    <div class="fn_con_item con_item">
                        <img src="../other/banner1.jpg" alt="" />
                    </div>
                    <div class="fn_con_item con_item">
                        <img src="../other/banner2.jpg" alt="" />
                    </div>
                    <div class="fn_con_item con_item">
                        <img src="../other/banner3.jpg" alt="" />
                    </div>
                </div>
            </div>
            <div class="fn_btnbox btnbox">
                <ul>
                  <li class="fn_btn_item btn_item on">btn1</li>
                  <li class="fn_btn_item btn_item">btn2</li>
                  <li class="fn_btn_item btn_item">btn3</li>
                </ul>
            </div>
            <div class="fn_btnbox_extra">
                <a href="javascript:;" class="fn_pre">上一张</a>
                <a href="javascript:;" class="fn_next">下一张</a>
            </div>
        </div>
    </div>

    <div class="mb20">
        <h2>图片切换插件 无动画</h2>
        <div>pCommon.slider.init("#slidBanner1", {type: "n"});</div>
        <div id="slidBanner4" class="m_slide">
            <div class="fn_con con">
                <div class="fn_con_inner con_inner">
                    <div class="fn_con_item con_item">
                        <img src="../other/banner1.jpg" alt="" />
                    </div>
                    <div class="fn_con_item con_item">
                        <img src="../other/banner2.jpg" alt="" />
                    </div>
                    <div class="fn_con_item con_item">
                        <img src="../other/banner3.jpg" alt="" />
                    </div>
                </div>
            </div>
            <div class="fn_btnbox btnbox">
                <ul>
                  <li class="fn_btn_item btn_item on">btn1</li>
                  <li class="fn_btn_item btn_item">btn2</li>
                  <li class="fn_btn_item btn_item">btn3</li>
                </ul>
            </div>
            <div class="fn_btnbox_extra">
                <a href="javascript:;" class="fn_pre">上一张</a>
                <a href="javascript:;" class="fn_next">下一张</a>
            </div>
        </div>
    </div>
    <div class="mb20 s_line"></div>

    <div class="pb20 timebtn">
        <h2>按钮锁定组建说明</h2>
        <p>默认提供锁定按钮并倒计时60秒功能,通过传参可以:*改变倒计时时间*改变锁定显示文字*改变锁定后样式名(默认锁定样式为"locked")</p>
        <p>锁定按钮替换文字标签class名称为"fn_txt",不可修改</p>
        <p>默认参数</p>
        //按钮上锁样式<br>
        lockClass: "locked",<br>
        //倒计时时间<br>
        time: 60,<br>
        //锁定后的文字<br>
        replaceTxt: null
        <p>调用实例如下：</p>
        <div class="mb20">
            <h2>1、锁定按钮并显示固定文字,并提供调用强制解锁方法</h2>
            <a href="javascript:;" id="timeBtn1" class="btn"><span class="fn_txt">获取验证码1</span></a>
            <p><a id="ulock1" href="javascript:;">点我强制解锁</a></p>
        </div>
        <div class="mb20">
            <h2>2、锁定按钮并指定倒计时时间30秒,指定锁定后按钮样式名"bnt_unable"</h2>
            <a href="javascript:;" id="timeBtn2" class="btn"><span class="fn_txt">获取验证码2</span></a>
        </div>
        <div class="mb20">
            <h2>2、默认锁定</h2>
            <a href="javascript:;" id="timeBtn3" class="btn"><span class="fn_txt">获取验证码3</span></a>
        </div>
        <script type="text/javascript">
            seajs.use("common", function(pCommon){
                var jbtn1 = $("#timeBtn1"), jbtn2 = $("#timeBtn2"), jbtn3 = $("#timeBtn3");
                var timebtn1, timebtn2, timebtn3;
                timebtn1 = pCommon.timeBtn.init("timeBtn1",{replaceTxt: "锁定后文字"});
                jbtn1.click(function(){
                        timebtn1.lock();
                        });
                $("#ulock1").click(function(){
                        timebtn1.unlock();
                });

                timebtn2 = pCommon.timeBtn.init("timeBtn2",{time:30, lockClass:"bnt_unable"});
                jbtn2.click(function(){
                            timebtn2.lock();
                });

                timebtn3 = pCommon.timeBtn.init("timeBtn3");
                jbtn3.click(function(){
                            timebtn3.lock();
                            //另一种调用方式,不存储临时变量，直调用返回对象的lock方法
                            //pCommon.timeBtn.init("timeBtn3").lock();
                });

            })
        </script>

    </div>



</div>

    <a id="back2top" href="#">返回顶部</a>
    <a id="floatDiv" href="#">dddd</a>

<script type="text/javascript">
        seajs.use("demo", function(demo){
                demo.init();
                });

</script>

</body>
</html>
